<template>
  <view class="inventory-info-container">
    <!-- 第一块：任务信息 -->
    <view class="task-info-section">
      <view class="task-info-card">
        <view class="task-info-content">
          <view class="task-header">
            <text class="task-name">{{ taskInfo.name }}</text>
            <text class="task-number">编号：{{ taskInfo.number }}</text>
          </view>
          <view class="task-details">
            <view class="detail-item">
              <text class="detail-label">计划完成</text>
              <text class="detail-value">{{ taskInfo.planDate }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">任务描述</text>
              <text class="detail-value">{{ taskInfo.description }}</text>
            </view>
          </view>
        </view>
        <view class="scan-button" @click="handleScan">
          <uni-icons type="scan" size="24" color="#ffffff"></uni-icons>
        </view>
      </view>
    </view>

    <!-- 第二块：搜索筛选 -->
    <view class="filter-section">
      <view class="search-box">
        <uni-search-bar 
          placeholder="搜索资产名称或编码" 
          @confirm="handleSearch"
          @input="handleSearchInput"
          @clear="handleClear"
          :value="searchKeyword"
          @change="handleSearchChange"
          radius="20"
          bgColor="#f8f9fa"
        ></uni-search-bar>
      </view>
      
      <view class="filter-row">
        <view class="filter-item">
          <text class="filter-label">盘点结果</text>
          <uni-data-select
            v-model="filterResult"
            :localdata="resultOptions"
            placeholder="请选择"
            @change="handleResultChange"
          ></uni-data-select>
        </view>
        <view class="filter-item">
          <text class="filter-label">可用性</text>
          <uni-data-select
            v-model="filterAvailability"
            :localdata="availabilityOptions"
            placeholder="请选择"
            @change="handleAvailabilityChange"
          ></uni-data-select>
        </view>
      </view>
    </view>

    <!-- 第三块：资产列表 -->
    <view class="asset-list-section">
      <view class="asset-list">
        <view 
          class="asset-card" 
          v-for="(asset, index) in displayAssetList" 
          :key="asset.id"
        >
          <view class="asset-header">
            <view class="asset-info">
              <text class="asset-name">{{ asset.name }}</text>
              <text class="asset-code">编码：{{ asset.code }}</text>
            </view>
            <view class="asset-status">
              <view class="status-item">
                <text class="status-label">可用性</text>
                <text class="status-value" :class="getAvailabilityClass(asset.availability)">
                  {{ asset.availability }}
                </text>
              </view>
              <view class="status-item">
                <text class="status-label">盘点结果</text>
                <text class="status-value" :class="getResultClass(asset.result)">
                  {{ asset.result }}
                </text>
              </view>
            </view>
          </view>
          <view class="asset-location">
            <text class="location-label">位置：</text>
            <text class="location-value">{{ asset.location }}</text>
          </view>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view class="empty-state" v-if="displayAssetList.length === 0">
        <uni-icons type="info" size="60" color="#ccc"></uni-icons>
        <text class="empty-text">暂无资产</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        searchKeyword: '',
        filterResult: '',
        filterAvailability: '',
        taskInfo: {
          name: '设备维护检查',
          number: 'TASK-2023-001',
          planDate: '2023-12-15',
          description: '对生产车间的主要设备进行定期维护检查，确保设备正常运行。'
        },
        assetList: [
          {
            id: 1,
            name: '生产设备A型',
            code: 'ASSET-001',
            availability: '可用',
            result: '账实相符',
            location: '生产车间A区'
          },
          {
            id: 2,
            name: '检测仪器B型',
            code: 'ASSET-002',
            availability: '可用',
            result: '盘亏',
            location: '实验室B区'
          },
          {
            id: 3,
            name: '运输设备C型',
            code: 'ASSET-003',
            availability: '报废',
            result: '账实相符',
            location: '仓库C区'
          },
          {
            id: 4,
            name: '监控设备D型',
            code: 'ASSET-004',
            availability: '可用',
            result: '账实相符',
            location: '监控室'
          },
          {
            id: 5,
            name: '办公设备E型',
            code: 'ASSET-005',
            availability: '可用',
            result: '盘亏',
            location: '办公室'
          }
        ],
        resultOptions: [
          { value: '', text: '全部' },
          { value: '账实相符', text: '账实相符' },
          { value: '盘亏', text: '盘亏' }
        ],
        availabilityOptions: [
          { value: '', text: '全部' },
          { value: '可用', text: '可用' },
          { value: '报废', text: '报废' }
        ]
      }
    },
    computed: {
      filteredAssetList() {
        let filtered = this.assetList;
        
        // 搜索过滤
        if (this.searchKeyword && this.searchKeyword.trim() !== '') {
          const keyword = this.searchKeyword.toLowerCase().trim();
          filtered = filtered.filter(asset => 
            asset.name.toLowerCase().includes(keyword) ||
            asset.code.toLowerCase().includes(keyword)
          );
        }
        
        // 盘点结果过滤
        if (this.filterResult) {
          filtered = filtered.filter(asset => asset.result === this.filterResult);
        }
        
        // 可用性过滤
        if (this.filterAvailability) {
          filtered = filtered.filter(asset => asset.availability === this.filterAvailability);
        }
        
        return filtered;
      },
      displayAssetList() {
        return this.filteredAssetList;
      }
    },
    methods: {
      handleScan() {
        uni.showToast({
          title: '扫码功能',
          icon: 'none'
        });
      },
      handleSearch(e) {
        const value = e.detail?.value || e.value || '';
        this.searchKeyword = value;
      },
      handleSearchInput(e) {
        const value = e.detail?.value || e.value || '';
        this.searchKeyword = value;
      },
      handleClear() {
        this.searchKeyword = '';
      },
      handleSearchChange(e) {
        const value = e.detail?.value || e.value || '';
        this.searchKeyword = value;
      },
      handleResultChange(e) {
        this.filterResult = e;
      },
      handleAvailabilityChange(e) {
        this.filterAvailability = e;
      },
      getAvailabilityClass(availability) {
        return availability === '可用' ? 'available' : 'scrapped';
      },
      getResultClass(result) {
        return result === '账实相符' ? 'matched' : 'loss';
      }
    }
  }
</script>

<style lang="scss">
  .inventory-info-container {
    padding: 20rpx;
    background-color: #f5f5f5;
    min-height: 100vh;
  }
  
  // 第一块：任务信息
  .task-info-section {
    margin-bottom: 20rpx;
  }
  
  .task-info-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16rpx;
    padding: 30rpx;
    box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.2);
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4rpx;
      background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
    }
  }
  
  .task-info-content {
    flex: 1;
    
    .task-header {
      margin-bottom: 20rpx;
      
      .task-name {
        display: block;
        font-size: 32rpx;
        font-weight: bold;
        color: #ffffff;
        margin-bottom: 8rpx;
        line-height: 1.4;
      }
      
      .task-number {
        display: block;
        font-size: 24rpx;
        color: rgba(255, 255, 255, 0.8);
      }
    }
    
    .task-details {
      .detail-item {
        margin-bottom: 12rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .detail-label {
          font-size: 24rpx;
          color: rgba(255, 255, 255, 0.7);
          margin-right: 10rpx;
        }
        
        .detail-value {
          font-size: 26rpx;
          color: #ffffff;
          line-height: 1.4;
        }
      }
    }
  }
  
  .scan-button {
    width: 80rpx;
    height: 80rpx;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 20rpx;
    transition: all 0.3s ease;
    
    &:active {
      transform: scale(0.9);
      background: rgba(255, 255, 255, 0.3);
    }
  }
  
  // 第二块：搜索筛选
  .filter-section {
    margin-bottom: 20rpx;
  }
  
  .search-box {
    margin-bottom: 20rpx;
  }
  
  .filter-row {
    display: flex;
    gap: 20rpx;
  }
  
  .filter-item {
    flex: 1;
    
    .filter-label {
      display: block;
      font-size: 24rpx;
      color: #666;
      margin-bottom: 8rpx;
    }
  }
  
  // 第三块：资产列表
  .asset-list-section {
    margin-top: 20rpx;
  }
  
  .asset-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.2);
    position: relative;
    overflow: hidden;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4rpx;
      background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
    }
  }
  
  .asset-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20rpx;
  }
  
  .asset-info {
    flex: 1;
    
    .asset-name {
      display: block;
      font-size: 32rpx;
      font-weight: bold;
      color: #ffffff;
      margin-bottom: 8rpx;
      line-height: 1.4;
    }
    
    .asset-code {
      display: block;
      font-size: 24rpx;
      color: rgba(255, 255, 255, 0.8);
    }
  }
  
  .asset-status {
    text-align: right;
    
    .status-item {
      margin-bottom: 8rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .status-label {
        display: block;
        font-size: 22rpx;
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 4rpx;
      }
      
      .status-value {
        display: block;
        font-size: 24rpx;
        color: #ffffff;
        font-weight: 500;
        
        &.available {
          color: #4caf50;
        }
        
        &.scrapped {
          color: #f44336;
        }
        
        &.matched {
          color: #4caf50;
        }
        
        &.loss {
          color: #ff9800;
        }
      }
    }
  }
  
  .asset-location {
    .location-label {
      font-size: 24rpx;
      color: rgba(255, 255, 255, 0.7);
    }
    
    .location-value {
      font-size: 26rpx;
      color: rgba(255, 255, 255, 0.9);
    }
  }
  
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100rpx 0;
    
    .empty-text {
      margin-top: 20rpx;
      font-size: 28rpx;
      color: #999;
    }
  }
</style>
